<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

// S 渲染列表
const list = ref([]);
const getList = async () => {
  const res = await axios({
    method: 'GET',
    url: '/list',
  });
  list.value = res.data;
};
// E

// S 删除
const onDel = async ({ id }) => {
  await axios({
    method: 'DELETE',
    url: '/del/' + id,
    params: { id },
    data: {
      name: 'xixi',
    },
    headers: {
      Authorization: 'Bearer token value',
    },
  });
  await getList();
};
// E

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="app">
    <el-table :data="list">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="姓名" width="150" prop="name"></el-table-column>
      <el-table-column label="籍贯" prop="place"></el-table-column>
      <el-table-column label="操作" width="100" #default="{ row }">
        <!-- 如果用了 template 标签，不指定插槽名称，那么填充的内容将会被无视，即便是默认插槽，也要指定 #default 名称 -->
        <!-- <template>
          <el-button type="primary" link>删除</el-button>
        </template> -->

        <!-- 如果不用 template 包裹，还是阔以的。 -->
        <el-button type="danger" link @click="onDel(row)">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.app {
  width: 980px;
  margin: 100px auto 0;
}
</style>
